<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/global.css" media="all"/>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 page-container">
    <header class="form-filter-wrap">
        <form class="layui-form form-inline" onsubmit="return false">
            <div class="form-group">
                <div class="form-filter">
                    <div class="form-inner">
                        <label class="layui-form-label">单位：</label>
                        <div class="layui-input-inline">
                            <select multiple lay-omit id="branch" lay-search>
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                    <button id="searchBt" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe615;</i>搜索
                    </button>
                </div>
                <div align="right">
                    <button class="layui-btn layui-btn-sm" onclick="save()"
                            permission="sys:user:add">
                        <i class="layui-icon">&#xe608;</i> 添加
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="update()"
                            permission="sys:user:add">
                        <i class="layui-icon">&#xe642;</i> 编辑
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="passWord()"
                            permission="sys:user:add">
                        <i class="layui-icon">&#xe642;</i> 修改密码
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="enDis()"
                            permission="sys:user:add"> 启用/禁用
                    </button>
                </div>
            </div>

        </form>
    </header>

    <div class="content-container">
        <div class="widget-body no-padding">
            <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                <thead>
                <tr>
                    <th></th>
                    <th>账号</th>
                    <th>用户名</th>
                    <th>U聊账号</th>
                    <th>邮箱</th>
                    <th>所属单位</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../js/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/dict.js"></script>
<script type="text/javascript">
    layui.use(['layer'], function () {
        var layer = layui.layer;
    });

    /*公司*/
    layui.use(['layer', 'form', 'jquery'], function () {
        var form = layui.form;

        $.ajax({
            url: '/dropDown/getBranch',
            dataType: 'json',
            type: 'post',
            success: function (data) {
                // 使用循环遍历，给下拉列表赋值
                $.each(data, function (index, value) {
                    $('#branch').append(new Option(value.value, value.key));// 下拉菜单里添加元素
                });
                form.render();//重新渲染 固定写法
            }
        })
    });

    var example;

    function init() {
        example =
            $('#dt-table').DataTable({
                "searching": false,
                "processing": false,
                "serverSide": true,
                "ordering": false,
                "language": {
                    "url": "/js/plugin/datatables/Chinese.lang"
                },
                "ajax": {
                    "url": "/users",
                    "type": "get",
                    "data": function (d) {
                        if ($("#branch").val() != null) {
                            d.branch = JSON.stringify($("#branch").val());
                        }
                    },
                    "error": function (xhr, textStatus, errorThrown) {
                        var msg = xhr.responseText;
                        // console.log(msg);
                        var response = JSON.parse(msg);
                        var code = response.code;
                        var message = response.message;
                        if (code == 400) {
                            layer.msg(message);
                        } else if (code == 401) {
                            localStorage.removeItem("token");
                            layer.msg("token过期，请先登录", {shift: -1, time: 1000}, function () {
                                location.href = '/login.html';
                            });
                        } else if (code == 403) {
                            // console.log("未授权:" + message);
                            layer.msg('未授权');
                        } else if (code == 500) {
                            layer.msg('系统错误：' + message);
                        }
                    }
                },
                "dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'table-bottom col-sm-10 col-xs-12 hidden-xs'i><'table-bottom col-xs-12 col-sm-10' p v>>",
                "columns": [
                    {
                        "data": "id",
                        "render": function (data, type, row, meta) {
                            return "<input type='radio' class='table-checkbox'  name='childclick' id='' value=" + data + " />";
                        }
                    },
                    {"data": "username", "defaultContent": ""},
                    {"data": "nickname", "defaultContent": ""},
                    {"data": "ul", "defaultContent": ""},
                    {"data": "email", "defaultContent": ""},
                    {
                        "data": "branch", "defaultContent": "",
                        render: function (data, type, row, meta) {
                            if (data) {
                                if (data.length > 30) {
                                    return data.substr(0, 30) + " <a style='color: #1E9FFF ;font-size: 8px' href='javascript:void(0);' onclick='javascript:searchBtn3(\"" + data + "\", \"" + '所属单位' + "\")' ><i style='font-weight: bold' class='layui-icon layui-icon-search'></i></a> ";
                                } else {
                                    return data;
                                }
                            } else {
                                return "";
                            }
                        }
                    },
                    {
                        "data": "status", "defaultContent": "",
                        "render": function (data, type, row) {
                            if (data === 1) {
                                return "启用"
                            } else {
                                return "禁用";
                            }
                        }
                    }
                ],
                "order": [[0, "desc"], [1, "asc"]]
            });
    }

    function searchBtn3(id, title) {
        layer.open({
            type: 1
            , title: '<div class="layui-icon" style="font-weight: bold; text-align: center">' + title + '</div>'
            , area: ["600px", ""]
            , content: '<div style="padding: 20px;font-size:18px;line-height:30px;">' + id + '</div>'
            , btnAlign: 'c' //按钮居中
            , shade: 0.3 //不显示遮罩
            , shadeClose: false
            , yes: function () {
                layer.closeAll();
            }
        });
    }

    $("#searchBt").click(function () {
        example.ajax.reload();
    });

    init();

    function save() {
        layer.open({
            type: 2,
            title: ['新增', 'font-weight:bold;font-size:20px;'],
            shadeClose: true,
            shade: 0.8,
            area: ['1000px', '500px'],
            content: 'addUser.html'
        });
    }

    function update() {
        var id = $('input[type="radio"]:checked').val();
        if (id) {
            layer.open({
                type: 2,
                title: ['编辑', 'font-weight:bold;font-size:20px;'],
                shadeClose: true,
                shade: 0.8,
                area: ['1050px', '500px'],
                content: "updateUser.html?id=" + id
            });
        } else {
            layer.msg('请选择一条数据！');
        }
    }

    function passWord() {
        var id = $('input[type="radio"]:checked').val();
        if (id) {
            layer.open({
                type: 2,
                title: ['修改密码', 'font-weight:bold;font-size:20px;'],
                shadeClose: true,
                shade: 0.8,
                area: ['451px', '400px'],
                content: "changePassword.html?id=" + id
            });
        } else {
            layer.msg('请选择一条数据！');
        }
    }

    function enDis(data) {
        var id = $('input[type="radio"]:checked').val();
        if (id) {
            $.ajax({
                type: 'post',
                url: '/users/enDis/' + id,
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                success: function (data) {
                    layer.msg("修改成功", {icon: 1, shift: -1, time: 1000}, function () {
                        location.href = "userList.html";
                    });
                }
            });
        } else {
            layer.msg('请选择一条数据！');
        }
    }

</script>
</body>
</html>

